<template>
  <div>
    Element.vue <br>
    Mouse position is at: {{ x }}, {{ y }} <br>
    <el-input v-focus v-model="info" size="default" style="width: 200px"></el-input>
    <br>
    <button @click="show = !show">Toggle</button>
    <Transition>
      <p v-if="show">hello</p>
    </Transition>
  </div>
</template>

<script setup>
import {useMouse} from "@/untils/compositeFn";
import {ref} from "vue";
const { x, y } = useMouse()
let info = ref('123')
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el, binding) => {
   return el.focus()
  }
}
let show = ref(true)
</script>

<style scoped>
.v-enter-active, .v-leave-active {
  transition: opacity 1s  cubic-bezier(1, 0.5, 0.8, 1);
}

.v-enter-from, .v-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>